<!--
 * @Author: PoJun
 * @Date: 2024-06-23 15:12:32
 * @LastEditors: PoJun
 * @LastEditTime: 2024-06-23 16:38:42
 * @Message: Nothing
-->
<template>
  <view class="system-info" :style="[vuex_theme]">
    <view class="system-info-header"></view>
    <view class="system-info-content">
      <uv-form labelPosition="left" :model="systemInfo" :borderBottom="false" labelWidth="auto">
        <uv-form-item label="设备品牌" :borderBottom="true">
          <uv-input
            v-model="systemInfo.deviceBrand"
            border="none"
            inputAlign="right"
            readonly
          ></uv-input>
        </uv-form-item>
        <uv-form-item label="设备型号" :borderBottom="true">
          <uv-input
            v-model="systemInfo.deviceModel"
            border="none"
            inputAlign="right"
            readonly
          ></uv-input>
        </uv-form-item>
        <uv-form-item label="系统名称" :borderBottom="true">
          <uv-input
            v-model="systemInfo.osName"
            border="none"
            inputAlign="right"
            readonly
          ></uv-input>
        </uv-form-item>
        <uv-form-item label="系统版本" :borderBottom="true">
          <uv-input
            v-model="systemInfo.osVersion"
            border="none"
            inputAlign="right"
            readonly
          ></uv-input>
        </uv-form-item>
        <uv-form-item label="系统语言" :borderBottom="true">
          <uv-input
            v-model="systemInfo.osLanguage"
            border="none"
            inputAlign="right"
            readonly
          ></uv-input>
        </uv-form-item>
        <uv-form-item label="当前电量" :borderBottom="true">
          <uv-input
            v-model="systemInfo.batteryLevel"
            border="none"
            inputAlign="right"
            readonly
          ></uv-input>
        </uv-form-item>
        <uv-form-item label="屏幕亮度" :borderBottom="true">
          <uv-input
            v-model="systemInfo.screenWidth"
            border="none"
            inputAlign="right"
            readonly
          ></uv-input>
        </uv-form-item>
        <uv-form-item label="屏幕宽度" :borderBottom="true">
          <uv-input
            v-model="systemInfo.screenHeight"
            border="none"
            inputAlign="right"
            readonly
          ></uv-input>
        </uv-form-item>
        <uv-form-item label="设备像素比" :borderBottom="true">
          <uv-input
            v-model="systemInfo.devicePixelRatio"
            border="none"
            inputAlign="right"
            readonly
          ></uv-input>
        </uv-form-item>
      </uv-form>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      systemInfo: {}
    }
  },
  async onLoad() {
    this.systemInfo = await uni.getSystemInfo()
  }
}
</script>

<style lang="scss" scoped>
.system-info {
  &-header {
    height: 20rpx;
    background: $uv-bg-color;
  }
  &-content {
    padding: 0 25rpx;
  }
}
</style>
